
<!DOCTYPE html>
<html lang="en">
 <head>
<meta charset="UTF-8">
<title>dz4－overlay</title>
	<script src="openseadragon.js"></script>
    <link rel="stylesheet"  href="css/lightslider.css"/>
   <style>
   	p { padding: 0 1.5em; }
    .navigator .highlight{
        opacity:    0.4;
        filter:     alpha(opacity=40);
        border:     2px solid #900;
        outline:    none;
        background-color: #900;
    }
    .highlight{
        opacity:    0.4;
        filter:     alpha(opacity=40);
        border:     2px solid #0A7EbE;
        outline:    10px auto #0A7EbE;
        /*box-shadow:	0 0 10px #0A7EbE;*/
        background-color: white;
       /* border-radius:50px;*/
    }
    .highlight:hover, .highlight:focus{
        filter:     alpha(opacity=70);
        opacity:    0.7;
        background-color: transparent;
    }
   
   
   	ul{
		list-style: none outside none;
	    padding-left: 0;
           margin: 0;
           white-space: nowrap;
	}
	ul:focus {
	    outline:solid 1px green;
	}
	
	li img{
		 display: inline-block;
	    border: 1px solid #CCCCCC;
	    border-radius: 5px 5px 5px 5px; /* optional */
	    cursor:pointer;
	    background-color: #F9F9F9;
	    background-position: center center;
	    background-repeat: no-repeat;
	}
	textarea{
		font-size: 11pt;
		font-family: Tahoma, Arial; 
		background-color: #FCFCEF;
		border: #CCCCCC 1px solid;
		padding: 3px;
	}
		
	#cropSliderWrap{
		position: absolute;
		z-index: 11;
		width: 135px; 
		right: 0px; 
		top: 5px;
		height: 100%;
	}

	#content-slider{
		width: 130px; 
		background-color: #FFFFFF;
		overflow: hidden;
	}
		
		
    </style>
    <script src="js/jquery1.9.1.min.js"></script>
    <script src="js/lightslider.js"></script> 

</head>
<body>

<div id="player1" style="width: 950px;height: 800px;position: relative;">
<div id="openseadragon1"></div>


<div id="cropSliderWrap"  class="demo">
    <ul id="content-slider" class="gallery list-unstyled clearfix">
    </ul>
</div>
</div>
<br>
<button type="button" id="btn_delete">Delete</button>
<button type="button" id="btn_tojson">toJSon</button>
<button type="button" id="btn_fromjson">fromJSon</button>

 <span id="snap_pos">level</span>

<textarea id="ta_info" style="width: 90%; height: 150px">
</textarea>
    <div class="demoheading">
        Point Overlays
    </div>
    <div id=right-arrow-overlay>
        <img src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Red_Arrow_Right.svg"
             alt="Right arrow"
             width="20">
    </div>
     <div id="example-tip" style='display:none;background-color:#fff;border:1px solid #0A7EbE;border-radius:5px;padding:5px;'>
         <p>
             The overlay can provide a class name and ID to bind additional events to.
         </p>
     </div>

<canvas id="clip_canvas" width="128" height="128" style="display:none;"></canvas>
<script type="text/javascript">
$(document).ready(function() {
	var sw=150;
	var wh = Math.min( $( window ).height()-20,$( window ).width() -sw);
	$('#player1').width(wh+sw).height(wh);
	$('#openseadragon1').width(wh).height(wh);
	$('#content-slider').width(sw)
	
	var pval = getUrlVars();
	var item_cout = Math.floor(wh/140);

	var viewer = init_viewer("openseadragon1",pval);	
	var slider = viewer.slider({
		el:"#content-slider",
        loop:false,
        keyPress:true,
        item:item_cout,
        vertical:true,
       verticalHeight:wh,
       slideMargin:5,
       adaptiveHeight:true,
       pager:false
    });
	
	//output all snap to json
	var btn_tojson = document.getElementById('btn_tojson');
	btn_tojson.onclick=function(){
		var e_ul = document.getElementById("content-slider");
		e_ul.img_editing=null;
		var clds = e_ul.childNodes;
		var snap_info=[];
		for(var i=0; i<clds.length; i++){
			var cld = clds[i];
			if(cld.tagName != 'LI')
				continue;
			var img = cld.childNodes[0];
			snap_info[snap_info.length]={
				page:img.page,
				bounds:img.bounds
			}
		}
		var ta = document.getElementById("ta_info");
		ta.value = JSON.stringify(snap_info);
	}
	
	var btn_fromjson = document.getElementById('btn_fromjson');
	btn_fromjson.onclick=function(){
		var ta = document.getElementById("ta_info");
		var snap_info = JSON.parse(ta.value);
		var e_ul = document.getElementById("content-slider");
 		while (e_ul.hasChildNodes()) {   
 			e_ul.removeChild(e_ul.firstChild);
 		}	
 		viewer.loadSnap(snap_info);
	}
	
});
function getUrlVars(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}



function init_viewer(vid,pval){
	var pic_len =pval['len']||72;
	var pic_path='pic/';
	var pic_name = pval['pic']||'MB5083';
	var pic_fmt = pval['fmt']||'png';
	var pic_height = pval['height']||3840;
	var pic_width=pval['width']||3840;
	var pic_size=pval['size']||256;
	var snap_path = pic_path+pic_name+'_'+pic_size+'/'+pic_name+'.json';
	
	
	var ts=[];
	for(var i=1; i<=pic_len; i++){
		var seqpath=i<10? '_0'+i+"_files/":'_'+i+"_files/";
		ts[i-1]={
			    Image: {
			        xmlns:    "http://schemas.microsoft.com/deepzoom/2008",
			        Format:   pic_fmt, 
			        Overlap:  1, 
			        TileSize: pic_size,
			        MinLevel: 8,
			        Url:      [pic_path ,pic_name,'_',pic_size,'/',pic_name,seqpath].join(''),
			        Size: {
			            Height: pic_height,
			            Width:  pic_width
			        }
			    }
			}
	}
/*   	ts[0].overlays=[{
             id: 'example-overlay',
             x: 0.33, 
             y: 0.75, 
             width: 0.2, 
             height: 0.25,
             className: 'highlight',
             tip:'热区提示22222<br>换行测试22222'
         },{
             id: 'example-overlay2',
             x: 0.4, 
             y: 0.35, 
             width: 0.16, 
             height: 0.1,
             className: 'highlight',
             tip:'热区提示111111<br>换行测试1111111'
         }];
	ts[1].overlays=[{
                id: 'right-arrow-overlay',
                x: 0.372,
                y: 0.272,
                placement: 'RIGHT',
                tip:'热区提示3333333<br>换行测试33333'
            }];
 */ 
	
	
   var viewer = OpenSeadragon({
        // debugMode: true,
        id: "openseadragon1",  //容器id
        prefixUrl: "images/", //openseadragon插件资源路径
        tileSources: ts,
        onPageChange: function() {
            //Tooltips
            setTimeout(bindtooltip, 2000);
        },
        sequenceMode: true,
        preserveViewport: true,  
        //preserveOverlays:true,
        blendTime:0,
        //preserveOverlays:true,
        //debugMode:  true,
        //useCanvas:false,
        //opacity:0.5,
       //immediateRender:true,
        maxImageCacheCount:5000,
        navPrevNextWrap:true,
        //alwaysBlend:true,
        //showRotationControl:true,
        show360Control:true,
        showSnapControl:true,
        //b360:true,
        showNavigator:true
    });
   viewer.addHandler('page',function(opts){
	   jQuery('#example-tip').hide();
   });
   viewer.addHandler('open1',function(args){
	   if(viewer.snaploaded)
		   return;
	   var jqxhr = $.getJSON(snap_path, function(data) {
		   //console.log( "success" );
		 })
	   .done(function(snap_info) {
	     //console.log( "second success" );
			var e_ul = document.getElementById("content-slider");
	 		while (e_ul.hasChildNodes()) {   
	 			e_ul.removeChild(e_ul.firstChild);
	 		}	
	 		viewer.loadSnap(snap_info);

	   })
	   .fail(function() {
	     console.log( "error" );
	   }).always(function() {
		   viewer.snaploaded=true;
	   });
   });

   viewer.addHandler('add-overlay',function(opt){
	   var el = opt.element;
	   el.tip = opt.options.tip;
	   $(el).css('display','block');
	   el.onclick=function(event){
		   if(!event.originalEvent)
			   return;
		   console.log(this.tip);
		   event.preventDefaultAction=true;
		   event.stopBubbling = true;
	   };
	   var tip = jQuery('#example-tip');
	    jQuery(el).hover(function(e){
	    	tip.html(this.tip);
	        var mousex = e.pageX + 20, //Get X coodrinates
	            mousey = e.pageY + 20, //Get Y coordinates
	            tipWidth = tip.width(), //Find width of tooltip
	            tipHeight = tip.height(), //Find height of tooltip
	        
	        //Distance of element from the right edge of viewport
	            tipVisX = $(window).width() - (mousex + tipWidth),
	        //Distance of element from the bottom of viewport
	            tipVisY = $(window).height() - (mousey + tipHeight);
	          
	        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
	            mousex = e.pageX - tipWidth - 20;
	        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
	            mousey = e.pageY - tipHeight - 20;
	        } 
	        tip.css({  top: mousey, left: mousex, position: 'absolute' });
	        tip.show().css({opacity: 0.8}); //Show tooltip
	    }, function() {
	        tip.hide(); //Hide tooltip
	    });
	});
   return viewer;
   
}


</script>
</body> 